<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好呀</title>
    <style>
        .menus {
            width: 200px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: gold;
            padding: 20px 10px;
        }
    </style>


</head>
<body>
<div class="menus">
    <div class="header" onclick="myFunc()">大标题</div>
    <div claSS="item">内容</div>
    <span id="txt">我这次真的很喜欢你,</span>
    <ul id="city">

    </ul>
</div>


<script type="text/javascript">
    function myFunc() {
        // alert("你好呀")
        confirm("是否要继续？")
    }

    // 发送网络请求，获取数据
    function show() {
        //1.去HTML中找到某个标签并获取他的内容(D0M)
        var tag = document.getElementById("txt");
        var dataString = tag.innerText;

        //2.动态起来，把文本中的第一字符放在字符串的最后面
        var firstChar = dataString[0];
        var otherString = dataString.substring(1, dataString.length)
        var newText = otherString + firstChar;

        //3.在HTML标签中更新内容
        tag.innerText = newText;
    }

    //JavaScript中的定时器，如:每1s执行一次show函数
    setInterval(show, 1000)

    var citylist = ["北京", "上海", "深圳"];
    for (var idx in citylist) {
        var text = citylist[idx];

        //创建<li></li>
        var tag = document.createElement("li")
        //在li标签中写入内容
        tag.innerText = text;

        // 添加到id=city那个标签的里面，DOM
        var paraentTag = document.getElementById("city")
        paraentTag.appendChild(tag)
    }
</script>


</body>
</html>